import React, { useEffect, useState } from 'react'
import { Row, Col, Card, Table } from 'antd'
import './home.css'
import { getData } from '../../api'
import * as Icons from '@ant-design/icons'
// import * as echarts from 'echarts'
import MyEcharts from '../../components/Echarts'

// 动态获取icon
const iconToElement = (name) => React.createElement(Icons[name])

export default function Home() {
    const userImg = require('../../assets/images/user.png')
    // 创建echarts数据
    const [echartData, setEchartData] = useState({})
    useEffect(() => {
        getData().then(res => {
            console.log(res.data.data)
            const { tableData, orderData, userData, videoData } = res.data.data
            setTableData(tableData)

            const order = orderData;
            console.log('a')
            const xData = order.date;
            console.log('b')
            const keyArray = Object.keys(order.data[0])
            const series = []
            keyArray.forEach(key => {
                series.push({
                    name: key,
                    data: order.data.map(item => item[key]),
                    type: 'line'
                })
            })
            console.log('c')
            setEchartData({
                order: {
                    xData,
                    series
                },
                user: {
                    xData: userData.map(item => item.date),
                    series: [
                        {
                            name: '新增用户',
                            data: userData.map(item => item.new),
                            type: 'bar'
                        },
                        {
                            name: '活跃用户',
                            data: userData.map(item => item.active),
                            type: 'bar'
                        },
                    ]
                },
                video: {
                    series: [
                        {
                            data: videoData,
                            type: 'pie'
                        }
                    ]
                }
            })

        })


    }, [])
    const columns = [
        {
            title: '课程',
            dataIndex: 'name'
        },
        {
            title: '今日购买',
            dataIndex: 'todayBuy'
        },
        {
            title: '本月购买',
            dataIndex: 'monthBuy'
        },
        {
            title: '总购买',
            dataIndex: 'totalBuy'
        }
    ]
    const countData = [
        {
            "name": "今日支付订单",
            "value": 1234,
            "icon": "CheckCircleOutlined",
            "color": "#2ec7c9"
        },
        {
            "name": "今日收藏订单",
            "value": 3421,
            "icon": "ClockCircleOutlined",
            "color": "#ffb980"
        },
        {
            "name": "今日未支付订单",
            "value": 1234,
            "icon": "CloseCircleOutlined",
            "color": "#5ab1ef"
        },
        {
            "name": "本月支付订单",
            "value": 1234,
            "icon": "CheckCircleOutlined",
            "color": "#2ec7c9"
        },
        {
            "name": "本月收藏订单",
            "value": 3421,
            "icon": "ClockCircleOutlined",
            "color": "#ffb980"
        },
        {
            "name": "本月未支付订单",
            "value": 1234,
            "icon": "CloseCircleOutlined",
            "color": "#5ab1ef"
        }
    ]
    const [tableData, setTableData] = useState([])
    return (
        <Row className='home'>
            <Col span={8}>
                <div>
                    <Card hoverable>
                        <div className='user'>
                            <img src={userImg} alt="" />
                            <div className="userinfo">
                                <p className='name'>Admin</p>
                                <p className='access'>超级管理员</p>
                            </div>
                        </div>
                        <div className='login-info'>
                            <p>上次登录时间：<span>2021-7-19</span></p>
                            <p>上次登录地点：<span>武汉</span></p>
                        </div>
                    </Card>
                    <Card>
                        <Table rowKey={'name'} columns={columns} dataSource={tableData} pagination={false} />
                    </Card>
                </div>
            </Col>
            <Col span={16}>
                <div className='num'>
                    {
                        countData.map((item, index) => {
                            return (
                                <Card key={index}>
                                    <div className='icon-box' style={{ backgroundColor: item.color }}>
                                        {iconToElement(item.icon)}
                                    </div>
                                    <div className='detail'>
                                        <p className='num'>￥{item.value}</p>
                                        <p className='txt'>{item.name}</p>
                                    </div>
                                </Card>
                            )
                        })
                    }
                </div>
                {echartData.order && <MyEcharts echartData={echartData.order} style={{ height: '280px' }} />}
                <div className='graph'>
                    {echartData.user && <MyEcharts echartData={echartData.user} style={{ height: '240px', width: '50%' }} />}
                    {echartData.video && <MyEcharts echartData={echartData.video} isAxisChart={false} style={{ height: '260px', width: '50%' }} />}
                </div>
            </Col>
        </Row>
    )
}
